<!DOCTYPE html>
<html lang="en"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.thymeleaf.org"
      layout:decorator="layout/pc_master">
<div layout:fragment="content">
    <link rel="stylesheet" href="/pc/css/pictureViewer.css">
    <div class="breadcrumb-wrap">
        <div class="layui-main clearfix">
            <div class="breadcrumb">
                <a href="/">首页</a> - <a href="/singles">单身列表</a> - 单身详情
            </div>
        </div>
    </div>
    <div class="section page-content">


        <div class="layui-main clearfix">
            <link rel="stylesheet" href="/pc/css/single/info.css">
            <div class="section-left">
                <div class="section-userhead piece">
                    <div class="top-bg"></div>
                    <div class="inner-content">
                        <div class="profile-img">
                            <img photo_mode="1" src="/pc/img/pic_seat.svg" th:bc-lazy-img="${single.photo}+'_200x200.jpg'" alt="">
                            <div class="active-online"></div>
                        </div>

                        <div class="nickname">
                            [[${single.nickname}]]<span class="uid">ID:[[${single.userId}]]</span>
                        </div>
                        <div class="info">
                            [[${single.age}+'岁']] |
                            <svg class="i" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
                                <path d="M839.946482 389.336542c0-179.917116-147.043874-325.820973-328.561518-325.820973-181.460336 0-328.561518 145.903857-328.561518 325.820973 0 59.446709 16.307166 114.955546 44.308214 162.939652l-0.351011 0 284.574638 407.316894 284.690277-407.316894-0.379665 0C823.757001 504.292088 839.946482 448.783251 839.946482 389.336542M511.413617 552.215816c-90.716353 0-164.280247-72.922251-164.280247-162.907928 0-89.927346 73.563895-162.907928 164.280247-162.907928 90.802315 0 164.280247 72.980582 164.280247 162.907928C675.693865 479.293565 602.215932 552.215816 511.413617 552.215816"></path>
                            </svg>
                            [[${single.districtCn}]]
                        </div>
                        <div class="authbox">
                            <a class="arrow pl" href="https://demo.bottlecms.com/manage/auth">
                                <i class="auth-icon idcard" th:classappend="${single.authIdentity >0 ?'on':''}"></i>
                                <i class="auth-icon mobile" th:classappend="${userPhone >0 ?'on':''}"></i>
                                <i class="auth-icon photo" th:classappend="${single.albumNum >3 ?'on':''}"></i>
                                <i class="auth-icon education" th:classappend="${single.authEducation >0 ?'on':''}"></i>
                                <i class="auth-icon work " th:classappend="${single.authWork >0 ?'on':''}"></i>
                                <i class="auth-icon hause " th:classappend="${single.authHause >0 ?'on':''}"></i>
                                <i class="auth-icon car " th:classappend="${single.authCar >0 ?'on':''}"></i>
                            </a>
                        </div>
                        <div class="foot">

                            <a href="javascript:;" class="layui-btn layui-btn-radius layui-btn-primary js-like like on"  th:data-id="${single.userId}">
                                <i class="icon i like-icon-off icon-bottlecms-83"></i>
                                <i class="icon i like-icon-on icon-bottlecms-84 hide"></i>
                                <font>心动</font>
                            </a>
                            <a href="javascript:;" class="layui-btn layui-btn-radius layui-btn-primary greet js-greet"  th:data-id="${single.userId}">
                                <i class="icon i icon-greet icon-bottlecms-86"></i>
                                <font>打招呼</font>
                            </a>
                            <a href="javascript:;" class="layui-btn  layui-btn-default layui-btn-radius custom-button chat  js-chat"  th:data-id="${single.userId}">
                                <i class="icon i icon-bottlecms-87"></i>
                                <font>聊天</font>
                            </a>

                        </div>


<!--                        <div class="handle">-->
<!--                            <div class="title"><a href="javascript:;"><svg t="1609575916101" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3250"><path d="M62.7968 512c0 52.22912 42.33728 94.57152 94.57152 94.57152 52.224 0 94.57152-42.3424 94.57152-94.57152s-42.34752-94.57152-94.57152-94.57152c-52.23936 0-94.57152 42.3424-94.57152 94.57152z m354.6368 0c0 52.22912 42.33728 94.57152 94.5664 94.57152 52.22912 0 94.5664-42.3424 94.5664-94.57152S564.22912 417.42848 512 417.42848c-52.23424 0-94.5664 42.3424-94.5664 94.57152z m354.62656 0c0 52.22912 42.34752 94.57152 94.57152 94.57152 52.22912 0 94.57152-42.3424 94.57152-94.57152s-42.3424-94.57152-94.57152-94.57152-94.57152 42.3424-94.57152 94.57152z" ></path></svg></a>-->
<!--                            </div>-->
<!--                            <dl class="child hide">-->
<!--                                <dd><a href="javascript:;" class="js-blacklist" data-id="1">拉黑</a></dd>-->
<!--                                <dd><a href="javascript:;" class="js-report" data-id="1">举报</a></dd>-->
<!--                            </dl>-->
<!--                        </div>-->
                    </div>
                </div>





                <!-- s: 相册 -->
                <div class="section-album piece" th:if="${singlePhotoCount} gt 0">
                    <h4 class="head">
                        <svg class="icon gradient" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
                            <path d="M959.791 258.732c-25.828-25.828-56.262-37.478-91.391-37.478H755.786l-25.828-68.002c-7.044-16.436-18.784-30.524-35.13-42.173-16.436-11.74-35.13-18.784-51.566-18.784H385.343c-18.784 0-35.13 7.044-51.565 18.784-16.436 11.74-28.176 25.828-35.13 42.173l-28.176 68.002H155.6c-35.13 0-65.653 11.74-91.391 37.478C38.38 284.56 26.73 314.994 26.73 350.214v452.532c0 35.13 11.74 65.654 37.478 91.482 25.828 25.828 56.262 37.477 91.391 37.477h712.71c35.13 0 65.653-11.74 91.39-37.477 25.829-25.828 37.479-56.262 37.479-91.482V350.214c0.09-35.22-11.56-65.654-37.388-91.482zM511.955 781.614c-117.22 0-213.397-96.088-213.397-213.397 0-117.22 96.087-213.398 213.397-213.398s213.397 96.088 213.397 213.398-96.178 213.397-213.397 213.397z m0 0"></path>
                            <path d="M511.955 427.607c-79.742 0-143.048 63.306-143.048 143.048s63.306 143.047 143.048 143.047 143.047-63.305 143.047-143.047-63.305-143.048-143.047-143.048z m0 0"></path>
                        </svg>
                        共 [[${singlePhotoCount}]] 张照片
                    </h4>

                    <div class="lists noaction">

<!--                        是VIP显示所有照片-->
                                <div class="col item" th:if="${isVip}" th:each="item,userStat:${singlePhoto}">
                                    <div class="img">
                                        <img photo_mode="1" th:src="${item.photo}+'_200x200.jpg'"
                                             th:bc-lazy-img="${item.photo}+'_200x200.jpg'"
                                             th:max-src="${item.photo}+'_800x800.jpg'"
                                             alt="">
                                        <div class="overlay">
                                            <a href="assets/images/profile/up1.jpg" class="img-popup">
                                                <svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M322.38090917 144.50668836l86.97341683 0-1e-8 734.98662328-86.97341682 0 0-734.98662328Z"></path><path d="M-1.6256937 468.51329122l734.98662329 0 0 86.97341684-734.98662329-1e-8 0-86.97341683Z"></path></svg>
                                            </a>
                                        </div>
                                    </div>
                                </div>

<!--                        非VIP只显示一张照片-->
                                <div class="col item" th:if="${!isVip}">
                                    <div class="img">
                                        <img photo_mode="1"
                                             th:src="${singlePhoto[0].photo}"
                                             th:bc-lazy-img="${singlePhoto[0].photo}"
                                             th:max-src="${singlePhoto[0].photo}"
                                             alt="">
                                        <div class="overlay">
                                            <a href="assets/images/profile/up1.jpg" class="img-popup">
                                                <svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M322.38090917 144.50668836l86.97341683 0-1e-8 734.98662328-86.97341682 0 0-734.98662328Z"></path><path d="M-1.6256937 468.51329122l734.98662329 0 0 86.97341684-734.98662329-1e-8 0-86.97341683Z"></path></svg>
                                            </a>
                                        </div>
                                    </div>
                                </div>
<!--                        非VIP提示-->
                                <div class="tip" th:if="${!isVip}">
                                    <div class="tip-content">
                                    <span>
                                        仅限VIP会员查看
                                    </span>
                                        <br/>
                                        <a class="btn btn-sm btn-danger" href="/center/setmeal">
                                            立即升级
                                        </a>
                                    </div>
                                </div>



                            </div>


                </div>
                <!-- e: 相册 -->


                <!--s: 媒婆 -->
<!--                <div class="section-meipo piece">-->
<!--                    <h4 class="head">-->
<!--                        <i class="icon-bottlecms-15 icon gradient"></i>-->
<!--                        媒婆说-->
<!--                    </h4>-->

<!--                    <div class="content">-->
<!--                        <a class="hninfo" href="javascript:;" tomobile>-->
<!--                            <div class="img">-->
<!--                                <img src="" bc-lazy-img="https://demo.bottlecms.com/uploads/meipo/photo/b34d35ffd784b4c12a7dd636d11da749.png?x-oss-process=image/resize,m_fill,h_200,w_200" />-->
<!--                            </div>-->
<!--                            <p class="name">-->
<!--                            <span>-->
<!--                                王婆-->
<!--                            </span>-->
<!--                            </p>-->
<!--                            <p class="desc">-->
<!--                                a收到；封疆大吏杰拉德手机放倒垃圾发拉屎激发拉多少激发拉多少发大水发送到发送发送到发送发送到收到发大水啊的沙发-->
<!--                            </p>-->
<!--                        </a>-->
<!--                        <div class="wcontent">-->
<!--                            <p class="words emptywds">-->
<!--                                <strong>-->
<!--                                    “-->
<!--                                </strong>-->
<!--                                王婆-->
<!--                                推荐了TA-->
<!--                                <strong>-->
<!--                                    ”-->
<!--                                </strong>-->
<!--                            </p>-->
<!--                        </div>-->
<!--                    </div>-->

<!--                </div>-->
                <!--e: 媒婆 -->



                <div class="section-contact piece" th:if="${userPhone >0} or (${userEmail} !=null and ${userEmail}!='') or ${userWechat > 0}">
                    <h4 class="head">
                        <svg t="1609511391973" class="icon gradient" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" >
                            <path d="M716.8 738.742857c-36.571429 36.571429-175.542857 0-307.2-131.657143-131.657143-131.657143-168.228571-270.628571-131.657143-307.2 29.257143-29.257143 73.142857-87.771429 131.657143-14.628571s29.257143 95.085714 0 124.342857c-21.942857 21.942857 21.942857 80.457143 73.142857 131.657143s109.714286 95.085714 131.657143 73.142857c29.257143-29.257143 51.2-58.514286 124.342857 0 58.514286 51.2 7.314286 87.771429-21.942857 124.342857m146.285714-738.742857H168.228571C146.285714 0 117.028571 7.314286 102.4 29.257143c-14.628571 14.628571-29.257143 36.571429-29.257143 65.828571v138.971429c14.628571 0 29.257143 7.314286 43.885714 21.942857 7.314286 14.628571 7.314286 29.257143 0 43.885714-7.314286 14.628571-21.942857 21.942857-43.885714 21.942857V438.857143c14.628571 0 29.257143 7.314286 43.885714 21.942857 7.314286 14.628571 7.314286 29.257143 0 43.885714-7.314286 14.628571-21.942857 21.942857-43.885714 21.942857v117.028572c14.628571 0 29.257143 7.314286 43.885714 21.942857 7.314286 14.628571 7.314286 29.257143 0 43.885714-7.314286 14.628571-21.942857 21.942857-43.885714 21.942857v182.857143c0 51.2 43.885714 87.771429 87.771429 87.771429h694.857143c21.942857 0 51.2-7.314286 65.828571-29.257143 14.628571-14.628571 29.257143-43.885714 29.257143-65.828571V87.771429c0-43.885714-43.885714-87.771429-87.771429-87.771429" fill="" p-id="3907"></path>
                        </svg>
                        联系方式
                    </h4>

                    <div class="content">
                        <div class="contacts">
                            <div class="lists">
                                <a class="item wechat js-apply_contact" th:if="${userPhone >0}" data-item="wechat"  th:data-id="${single.userId}" href="javascript:;"><i class="icon icon-bottlecms-79"></i><u>微信</u></a>
                                <a class="item email js-apply_contact" th:if="${userEmail} !=null and ${userEmail}!=''"  data-item="email"  th:data-id="${single.userId}" href="javascript:;"><i class="icon  icon-bottlecms-78"></i><u>邮箱</u></a>
                                <a class="item phone js-apply_contact" th:if="${userWechat > 0}" data-item="phone" th:data-id="${single.userId}" href="javascript:;"><i class="icon  icon-bottlecms-45"></i><u>电话</u></a>
                            </div>
                        </div>

                    </div>

                </div>


                <!-- s: 礼物 -->
                <div class="section-gifts piece">
                    <h4 class="head">
                        <i class="icon-bottlecms-82 icon gradient"></i>
                        TA收到的礼物
                    </h4>

                    <div class="content">
                        <div class="giftsbox">
                            <div class="gifts">

                                <div class="item" th:each="item,userStat:${gift}">
                                    <img class="cover" th:src="${item.cover}" th:bc-lazy-img="${item.cover}"/>
                                    <div class="gift-name _text">
                                        <span class=" _text">[[${item.title}]]</span>
                                        × [[${item.giftCount}]]
                                    </div>
                                </div>

                                <div class="item js-gift" th:data-id="${single.userId}" style="color: var(--color);">
                                    <i class="icon i icon-bottlecms-82" style="font-size: 60px;" ></i>
                                    <div class="gift-name" style="color: var(--color);">
                                        赠送TA礼物
                                        <br><br>
                                    </div>
                                </div>

                            </div>
                            <!-- <div>
                                <button class="layui-btn  layui-btn-default layui-btn-radius   js-gift"  data-id="1">
                                    <font>送礼物</font>
                                </button>
                            </div> -->
                        </div>
                    </div>
                </div>
                <!-- e: 礼物 -->
            </div>



    <div class="section-center">

        <div class="top-menu piece">
            <ul class="clearfix">

                <li><a href="javascript:singleInfoShow(1)" id="singleInfo_1" class="active">基本信息 </a></li>
                <li><a href="javascript:singleInfoShow(2)" id="singleInfo_2" >详细资料 </a></li>
                <li><a href="javascript:singleInfoShow(3)" id="singleInfo_3" >个性展示 </a></li>
                <!-- <li><a href="?act=moment"  class="">动态 </a></li> -->
            </ul>
        </div>

        <div id="singleDetail_1">
            <!--基础-->
            <div class="info-box piece">
                <div class="head"><h4 class="title">基本信息 </h4></div>
                <div class="content">
                    <ul class="infolist" th:utext="${baseInfo}">
                    </ul>
                </div>
            </div>
            <div class="info-box piece">
                <div class="head"><h4 class="title">择偶标准 </h4></div>
                <div class="content">
                    <ul class="infolist" th:utext="${baseMateInfo}">
                    </ul>
                </div>
            </div>
            <div class="info-box piece">
                <div class="head"><h4 class="title">内心独白 </h4></div>
                <div class="content">
                    <p class="text" th:text="${single.soliloquy}">
                    </p>
                </div>
            </div>
            <!--基础-->
        </div>

        <div id="singleDetail_2" style="display: none">
            <!--详细资料-->
                <div class="info-box piece">
                    <div class="head"><h4 class="title">详细资料 </h4></div>
                    <div class="content">
                        <ul class="infolist" th:utext="${detailInfo}">
                        </ul>
                    </div>
                </div>
                <div class="info-box piece">
                    <div class="head"><h4 class="title">择偶标准 </h4></div>
                    <div class="content">
                        <ul class="infolist" th:utext="${detailMateInfo}">
                        </ul>
                    </div>
                </div>
            <!--详细资料-->
        </div>

        <div id="singleDetail_3" style="display: none">
            <!--视频-->
            <div class="info-box piece" th:if="${single.voice} !=null and ${single.voice}!=''">
                <div class="head"><h4 class="title">声音 </h4></div>
                <div class="content noaction" style="padding: 30px; text-align: center;">
                    <div class="bcui_voice" style="">
                        <div class="bcui_voice_back"  photo_mode="1" th:style="'background-image:url('+${single.photo}+'_200x200.jpg)'" >
                        </div>
                        <audio th:if="${isVip}" controls="controls" hidden="" id="voice_8" preload="" th:src="${single.voice}"></audio>
                        <audio th:if="${!isVip}" controls="controls" hidden="" id="voice_8" preload="" ></audio>
                        <div class="bcui_voice_btn"></div>
                        <div class="tip" th:if="${!isVip}">
                            <div class="tip-content">
                        <span>
                        仅限VIP会员查看
                        </span>
                                <br>
                                <a class="btn btn-sm btn-danger" href="/center/setmeal">
                                    立即升级
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="info-box piece" th:if="${single.video} !=null and ${single.video}!=''">
                <div class="head"><h4 class="title">视频 </h4></div>
                <div class="content noaction" style="padding: 30px; text-align: center;">
                    <div class="bcui_voice_back" th:style="'background-image:url('+${single.photo}+'_600x600.jpg)'"></div>
                    <video th:if="${isVip}" x5-video-player-type="h5-page" controls="controls" th:poster="${single.photo}" th:src="${single.video}" style="background: #000; " width="300"></video>
                    <video th:if="${!isVip}" x5-video-player-type="h5-page" controls="controls" th:poster="${single.photo}" style="background: #000; " width="300"></video>
                    <div class="tip" th:if="${!isVip}">
                        <div class="tip-content">
                        <span>
                        仅限VIP会员查看
                        </span>
                            <br>
                            <a class="btn btn-sm btn-danger" href="/center/setmeal">
                                立即升级
                            </a>
                        </div>
                    </div>
                </div>
            </div>





            <!--视频-->
        </div>

    </div>

    <div class="section-right">
        <div class="other-profile piece">
            <div class="o-p-header">
                <h6 class="title">
                    你可能会喜欢
                </h6>
            </div>
            <div class="o-p-content">
                <div class="lists-slider owl-carousel">
                    <div class="slider-item" th:each="list,userStat:${mayLike}">
                        <div class="lists">
                            <div class="my-col" th:each="item,userStat:${list}">
                                <div class="img">
                                    <img photo_mode="1" class="cover" src="/pc/img/pic_seat.svg"
                                         th:bc-lazy-img="${item.photo}+'_200x200.jpg'"/>
                                    <a class="light-box mfp-iframe" th:href="@{'/single/info/'+${item.userId}}">
                                        <i class="fa fa-plus">
                                        </i>
                                    </a>
                                    </img>
                                </div>
                            </div >
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

    </div>
</div>
<div layout:fragment="contentFooter" >
    <script src="/pc/js/pictureViewer.js" type="text/javascript"></script>
    <script src="/pc/js/single/info.js" type="text/javascript"></script>
</div>
</html>